<template>
  <div id="app_index" class="app-container home">
    <div class="app_content">
      <div class="statistics_border">
        <div class="statistics_title r_flex_space">
          <div class="icon r_flex_center">
            <i class="el-icon-s-order" />
            <span style="font-weight: 600;">数据总览</span>
          </div>
          <!-- <el-select
            v-model="queryParams.time"
            placeholder="请选择时间"
          >
            <el-option label="所有时间" :value="1" />
            <el-option label="一个月" :value="2" />
            <el-option label="三个月" :value="3" />
          </el-select> -->

        </div>
        <div class="statistics_center r_flex">

          <div class="stati_list">
            <p class="r_flex_center stati_listp1"><i class="el-icon-s-flag" /><span>用户访问量（PV）</span></p>
            <p class="stati_listp2">{{ statisticsDta.pv }}</p>
          </div>

          <div class="stati_list">
            <p class="r_flex_center stati_listp1"><i class="el-icon-s-finance" /><span>独立访问量（UV）</span></p>
            <p class="stati_listp2">{{ statisticsDta.uv }}</p>
          </div>

          <div class="stati_list">
            <p class="r_flex_center stati_listp1"><i class="el-icon-s-custom" /><span>用户注册数</span></p>
            <p class="stati_listp2">{{ statisticsDta.registNum }}</p>
          </div>

          <div class="stati_list">
            <p class="r_flex_center stati_listp1"><i class="el-icon-s-order" /><span>用户留资数</span></p>
            <p class="stati_listp2">{{ statisticsDta.lzNum }}</p>
          </div>

          <div class="stati_list">
            <p class="r_flex_center stati_listp1"><i class="el-icon-s-shop" /> <span>大额贷产品申请数</span> </p>
            <p class="stati_listp2">{{ statisticsDta.applysNum }}</p>
          </div>

          <div class="stati_list">
            <p class="r_flex_center stati_listp1"><i class="el-icon-s-order" /> <span>大额贷产品收益</span> </p>
            <p class="stati_listp2">{{ statisticsDta.applysPrice }}</p>
          </div>

          <div class="stati_list">
            <p class="r_flex_center stati_listp1"><i class="el-icon-s-promotion" /><span>极速贷产品点击数</span></p>
            <p class="stati_listp2">{{ statisticsDta.jisuProductClick }}</p>
          </div>

          <div class="stati_list">
            <p class="r_flex_center stati_listp1"><i class="el-icon-s-promotion" /><span>极速贷点击收益</span></p>
            <p class="stati_listp2">{{ statisticsDta.jisuProductPrice }}</p>
          </div>

          <div class="stati_list">
            <p class="r_flex_center stati_listp1"><i class="el-icon-s-management" /><span>支出</span></p>
            <p class="stati_listp2">{{ statisticsDta.pay }}</p>
          </div>

          <div class="stati_list">
            <p class="r_flex_center stati_listp1"><i class="el-icon-s-management" /><span>收益</span></p>
            <p class="stati_listp2">{{ statisticsDta.profits }}</p>
          </div>

        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { dataTotal } from '@/api/business/total'
// import resize from './dashboard/mixins/resize'

export default {
  name: 'DataAll',
  data() {
    return {
      // 表达统计主体
      statisticsDta: {},
      // 查询参数
      dataTotalBo: {
        pageNum: 1,
        pageSize: 999
      }
    }
  },
  created() {
    this.getdataTotal()
    setTimeout(() => {
      console.log(this.statisticsDta)
    }, 3000)
  },
  methods: {
    getdataTotal() {
      dataTotal(this.dataTotalBo).then(response => {
        this.statisticsDta = response
      })
    },
    goTarget(href) {
      window.open(href, '_blank')
    }
  }
}
</script>

<style scoped lang="scss">
.home {
  font-size: 13px;
  color: #676a6c;
  overflow-x: hidden;
}

#app_index {
  padding: 10px;
  .app_content {
    .statistics_border {
      .statistics_title {
        padding: 10px;
        height: 50px;
        background: #eeeff2;
        line-height: 50px;
        .icon {
          line-height: 50px;
          height: 50px;
          color: #000;
          span {
            line-height: 50px;
          }
          i {
            color: #3695ff;
            padding-right: 4px;
            font-size: 24px;
            line-height: 50px;
          }
        }
      }
      .statistics_center {
        flex-flow: wrap;
        padding: 20px;
        font-size: 20px;
        font-weight: 900;
        text-align: left;
        color: #000;
        .stati_list {
          width: 260px;
          padding: 10px 20px;
          height: 140px;
          border-radius: 10px;
          margin-right: 60px;
          margin-bottom: 32px;
          box-shadow: 2px 2px 14px #d1d1d1;
          .stati_listp1{
            font-size: 18px;
            justify-content: normal;
            i{
              color: #3695ff;
              padding-right: 4px;
              font-size: 32px;
              line-height: 50px;
            }
          }
          .stati_listp2{
            font-size: 22px;
            padding-left: 28px;
          }
        }
      }
    }
  }
}
</style>
